<style>
  .spacing {
    color: var(--cros-text-color-secondary);
    font: var(--cros-button-2-font);
    margin-inline-end: 8px;
  }

  :host([narrow]) .spacing {
    margin-inline-end: 4px;
  }

  #text-wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  :host([narrow]) .parts-container {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  iron-icon {
    --iron-icon-width: 16px;
    --iron-icon-height: 16px;
    --iron-icon-fill-color: var(--cros-text-color-secondary);
  }
</style>

<div class="container">
  <!-- This element's innerHTML is dynamically set based on its text
  accelerator parts. -->
  <div id="text-wrapper">
    <div class="parts-container"></div>
    <div hidden="[[!shouldShowLockIcon()]]">
      <iron-icon id="lock" icon="shortcut-customization:lock"></iron-icon>
    </div>
  </div>
</div>